<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" type="image/x-icon" href="/plugin/favicon.ico">
    <link rel="stylesheet" href="/plugin/elementUI/elementUI.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
</head>
<body>
    <div class="login" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
            <el-row :gutter="20">
                <el-col :span="6" :offset="9">
                    <el-card class="box-card">
                        <div slot="header" align="center">
                            <h1>后台管理系统</h1>
                        </div>
                        <div align="right">
                            <el-form-item prop="user_name">
                                <el-input v-model="ruleForm.user_name" >
                                    <template width="20%" slot="prepend">用户名</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" v-model="ruleForm.password">
                                    <template width="20%" slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="verifyCode">
                                <el-input v-model="ruleForm.verifyCode">
                                    <template width="20%" slot="prepend">验证码</template>
                                    <template slot="append">
                                        <img v-bind:src="verifyCodeUrl" width="120" height="30" @click="getVerifyCode">
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-button type="primary" :icon="loginIcon" @click="login" :disabled="ableClick">{{ login_msg }}</el-button>
                                <el-button >重置</el-button>
                            </el-form-item>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-form>
    </div>


    <script type="text/javascript" src="/plugin/jQuery.js"></script>
    <script type="text/javascript" src="/plugin/vue.js"></script>
    <script type="text/javascript" src="/plugin/elementUI/elementUI.js"></script>
    <script type="text/javascript" src="/js/login.js"></script>
</body>
</html>